import React,{useEffect,useState} from 'react'
import {Card, Descriptions,Button} from "antd"
import {useNavigate, useParams,} from "react-router-dom"



import type {hosListDatilReturnTypes,hospitalListItemsType,bookingRuleType} from "@api/hospital/model/hospitalListTypes"
import {getHosListDatailInforRequest} from "@api/hospital/hospitalList"

export default function HospitalShow() {
  const navigate=useNavigate();
const {id}= useParams();
const [detail,setDetail]=useState<hosListDatilReturnTypes>({})


  useEffect(()=>{
    //刚加载组件就发送详情数据请求
    const getHosDatilRequest=async ()=>{
   const result= await getHosListDatailInforRequest(id as string)
   setDetail(result)
  //  console.log(result,"resultdddd")
      
    }
    getHosDatilRequest()
  },[])
  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
       { (detail.hospital as hospitalListItemsType)?.hosname }
          </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          {(detail.hospital as hospitalListItemsType)?.logoData? <img
              width={100}
              src={`data:image/jpeg;base64,${
                (detail.hospital as hospitalListItemsType)?.logoData
              }`}
              alt=""
            />:""}
       
          </Descriptions.Item>
        <Descriptions.Item label="医院编码">
        { (detail.hospital as hospitalListItemsType)?.hoscode }
          </Descriptions.Item>
        <Descriptions.Item label="医院地址">
        {(detail.hospital as hospitalListItemsType)?.param?.fullAddress}
          </Descriptions.Item>
        <Descriptions.Item label="医院坐车路线" span={2}>
        {(detail.hospital as hospitalListItemsType)?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
        {(detail.hospital as hospitalListItemsType)?.intro}
        </Descriptions.Item>
      </Descriptions>

      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: "30px" }}
      >
        <Descriptions.Item label="预约周期">
        {(detail.bookingRule as bookingRuleType)?.cycle}
          </Descriptions.Item>
        <Descriptions.Item label="放号时间">
        {(detail.bookingRule as bookingRuleType)?.releaseTime}
          </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
        {(detail.bookingRule as bookingRuleType)?.stopTime}
          </Descriptions.Item>
        <Descriptions.Item label="退号时间">
        {(detail.bookingRule as bookingRuleType)?.quitTime}
          </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
        {(detail.bookingRule as bookingRuleType)?.rule.map((item, index) => {
            return <p key={index}>{item}</p>;
          })}
        </Descriptions.Item>
      </Descriptions>

      <Button style={{ marginTop: "30px" }} onClick={()=>{navigate(-1)}}>返回</Button>
    </Card>
  );
}

